<template>
  <div>
    <div class="dashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">用户管理</div>
    </div>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../images/yellow.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">5</div>
            <div>总数</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 待认证 -->
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../images/blue.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">0</div>
            <div>待认证</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已通过-->
        <div class="redbox">
          <div class="leftbox">
            <img src="../../images/red.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="process">5</div>
            <div>已通过</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已拒绝 -->
        <div class="greenbox">
          <div class="leftbox">
            <img src="../../images/green.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="noprocess">0</div>
            <div>已拒绝</div>
          </div>
        </div>
      </div>
      <el-form :model="form" class="inquire">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input
                v-model="form.input"
                prefix-icon="el-icon-search"
                placeholder="企业名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="认证状态:" class="status">
              <el-select v-model="form.dropdown">
                <el-option label="已认证" value="option1"></el-option>
                <el-option label="未认证" value="option2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="reserve">
              <el-button style="background: #216cff;color: #fff;" @click="submitForm" class="submitForm"
                >查询</el-button
              >
              <el-button @click="resetForm" class="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="boxcard-bottom">
      <!-- 表格-->
      <div class="table-container">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%"
          :border="false"
          :show-overflow-tooltip="false"
          stripe
          class="bigtable"
        >
          <el-table-column
            type="index"
            label="序号"
            width="106px"
          ></el-table-column>
          <el-table-column label="认证状态" prop="status">
            <template slot-scope="{ row }">
              <span :class="getStatusClass(row.status)"> {{ row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名">
            <template slot-scope="{ row }">
              {{ row.userId }}
            </template>
          </el-table-column>
          <el-table-column label="用户类型">
            <template slot-scope="{ row }">
              {{ row.type }}
            </template>
          </el-table-column>
          <el-table-column label="姓名/企业信息">
            <template slot-scope="{ row }">
              {{ row.info }}
            </template>
          </el-table-column>
          <el-table-column label="认证信息">
            <template slot-scope="{ row }">
              <i
                class="el-icon-share"
                style="margin-right: 4px; color: #216cff"
              ></i>
              <span style="color: #216cff">{{ row.details }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间">
            <template slot-scope="{ row }">
              {{ row.time }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                style="
                  display: inline-block;
                  width: 52px;
                  height: 24px;
                  color: #039757;
                  font-size: 16px;
                  font-weight: 500;
                  margin-right: 10px;
                  border: 1px solid #039757;
                  border-radius: 4px 4px 4px 4px;
                "
                v-if="scope.row.status === '待认证'"
                >通过</a
              >
              <a
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                style="
                  display: inline-block;
                  width: 52px;
                  height: 24px;
                  color: #f39800;
                  font-size: 16px;
                  font-weight: 500;
                  margin-right: 10px;
                  border: 1px solid #f39800;
                  border-radius: 4px 4px 4px 4px;
                "
                v-if="scope.row.status === '待认证'"
                >驳回</a
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        align="center"
        class="footerpage"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="tableData.length"
        :current-page="currentPage"
        :page-size="pageSize"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import tableemployee from "@/views/settle";
export default {
  name: "Dashboard",
  data() {
    return {
      form: {
        input: "",
        status: "未认证",
        dropdown: "全部",
      },
      tableData: [
        {
          status: "待认证",
          company: "企业A",
          userId: "张三",
          type: "个人",
          time: "2023-04-10",
          info: "申报信息A",
          details: "查看详情",
        },
        {
          status: "已认证",
          company: "企业B",
          userId: "张三",
          type: "个人",
          time: "2023-04-09",
          info: "申报信息B",
          details: "查看详情",
        },
        {
          status: "未认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "已认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "已认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
        {
          status: "待认证",
          company: "企业C",
          userId: "张三",
          type: "个人",
          time: "2023-04-08",
          info: "申报信息C",
          details: "查看详情",
        },
      ],
      currentPage: 1, // 当前页码
      // total: 20, // 总条数
      pageSize: 8, // 每页的数据条数
    };
  },
  methods: {
    submitForm() {
      // 提交表单的逻辑
    },
    resetForm() {
      // 重置表单的逻辑
    },
    handleEdit(index, row) {
      // 编辑操作
    },
    handleDelete(index, row) {
      // 删除操作
    },
    // 动态class的方法,根据状态的不同显示不同的颜色
    getStatusClass(status) {
      switch (status) {
        case "已认证":
          return "blue-text";
        case "待认证":
          return "green-text";
        case "未认证":
          return "red-text";
        default:
          return "";
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
  computed: {
    ...mapGetters(["name"]),
    total() {
      return this.tableData.length;
    },
    // 实现按需内容查找
  },
};
</script>

<style lang="scss" scoped>
.el-card__body {
  box-shadow: none;
}
.el-card {
  box-shadow: none;
  border: none;
}
.dashboard-container {
  display: flex;
  padding: 10px 26px 26px 26px;
  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }
  .dashboard-text {
    font-size: 16px;
  }
}
.box-card {
  width: 1262px;
  height: 210px;
  margin-left: 24px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  .tittlebox {
    display: flex;
    justify-content: space-between;
    .yellowbox,
    .bluebox,
    .redbox,
    .greenbox {
      display: flex;
      justify-content: center;
      align-items: center;
      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }
      .sum {
        font-weight: bold;
        color: #fabc00;
      }
      .certified {
        font-weight: bold;
        color: #1e6ceb;
      }
      .process {
        font-weight: bold;
        color: #f46e3e;
      }
      .noprocess {
        font-weight: bold;
        color: #31a952;
      }
    }
  }
  // 表单
  .inquire {
    margin-top: 30px;
    margin-left: 16px;
  }
  // 认证状态
  .status {
    margin-left: 50px;
  }
  // 查询
  .reserve {
    margin-left: -160px;
    .submitForm {
      width: 105px;
      height: 40px;
      background: #4777e8;
    }
    .resetForm {
      color: #fff;
      font-size: 15px;
      width: 105px;
      height: 40px;
      background: #7986a6;
    }
  }
}
.dashedbox {
  display: inline-block;
  margin-top: 34px;
  height: 20px;
  width: 1px;
  border: 1px solid #eaedf2;
  margin-right: 30px;
  margin-left: 2px;
  // width: 10px;
}
// 下方卡片区域
.boxcard-bottom {
  margin-top: 10px;
  width: 1262px;
  max-height: 1200px;
  margin-left: 24px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
}
</style>
<!-- 表格样式css -->
<style >
.table-container {
  /* padding: 60px; */
}
.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}
.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}
/* 三种状态的不同显示颜色 */
.blue-text {
  color: #2675c0;
}
.green-text {
  color: #31a952;
}
.red-text {
  color: #f46e3e;
}
.footerpage {
  margin-top: 40px;
}
</style>
